<template>
  <div class="chooseTemplate">
    <div class="home_header">
      <el-container>
        <el-header style="text-align: right; font-size: 100%;height: 60px;background-color:#66B3FF">
        </el-header>
      </el-container>
    </div>

    <div class="home_main">
      <el-container>
        <el-main style="height: 92vh;width: 100%;background-color: #F2F6FC">
          <el-form :inline="true" style="margin-top: 20px;height: 30%;" :rules = 'rules'>
            <el-form-item style="width: 30%;" prop="title">
              <el-card>
                <div>
                  创建空白问卷
                </div>
                <div style="margin-top: 30px">
                  <el-input
                      placeholder="请输入标题"
                      v-model="title"
                      clearable>
                  </el-input>
                  <el-button style="margin-top: 20px" @click = 'createQuestionClick'>立即创建</el-button>
                </div>
              </el-card>
            </el-form-item>
            <el-form-item style="width: 30%;">
              <el-card>
                <div style="font-size: 200%">
                  或者你可以选择
                </div>
                <div style="margin-top: 60px">
                  <el-button style="width:95%;font-size: 330%">批量导入</el-button>
                </div>
              </el-card>
            </el-form-item>
          </el-form>

          <el-input placeholder="请输入模板名进行搜索" v-model="searchByName" class="input-with-select"
                    style="width:20%;margin-top: 70px;margin-right: 280px">
            <el-button slot="append" icon="el-icon-search" @click="searchByName"></el-button>
          </el-input>
          <el-button style="margin-right: 50px;margin-left: 60px" icon="el-icon-circle-plus-outline">添加模板</el-button>

          <el-row style="width: 60%;margin-top: 10px;margin-left: 330px">
            <el-col :span="7" v-for="(template) in allTemplate.slice((currentPage-1)*pageSize,currentPage*pageSize)" tracked-by="$index">
              <el-card style="margin-left: 8px;margin-top: 5px">
                <a style="float: left; padding: 3px 0">{{template.title}}</a>
                <br>
                <br>
                <a style="float: left;">共{{template.questionNumber}}题</a>
                <a style="float: right;">预览</a>
              </el-card>
            </el-col>
          </el-row>

          <div class="block" style=" margin-top: 20px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-size="9"
                :page-sizes="[9]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="allTemplate.length">
            </el-pagination>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      title:'',
      allTemplate:[{title:111,questionNumber: 1},{title:111,questionNumber: 1},{title:111,questionNumber: 1},{title:111,questionNumber: 1},{title:111,questionNumber: 1},{title:111,questionNumber: 1},{title:111,questionNumber: 1},{title:111,questionNumber: 1},{title:111,questionNumber: 1},{title:111,questionNumber: 1},{title:111,questionNumber: 1},{title:111,questionNumber: 1},{title:111,questionNumber: 1},{title:111,questionNumber: 1},{title:111,questionNumber: 1},{title:111,questionNumber: 1},{title:111,questionNumber: 1},{title:111,questionNumber: 1},{title:111,questionNumber: 1}],
      Template:{
        title:'',
        questionNumber:''
      },
      total:'',
      currentPage: 1,
      pageSize: 9,
      searchByName:'',
      rules:{
        title:[{require: true, trigger:'blur'}]
      }
    }
  },

  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  //  跳转到创建问卷页面
  //  跳转并传递userId,title到创建问卷页面
  //  创建完毕问卷之后由创建页面将数据传递到后端
    createQuestionClick(){
      console.log(this.$route.query.userId)
      this.$router.push({
        path:'/createQuestionnaire',
        query:{
          userId:sessionStorage.getItem('userId'),
          title:this.title
        }
      })
    }
  },
}
</script>
